<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  </head>
  <body>
    <div class="" id="view2">

    </div>
    <div id="view">
      mothod one: {{num1}} ---- {{num1}}<br/>
      method two: {{allChange2()}} ---- {{allChange2()}}<br><br>
      <button id="allBtn" type="button" click="change" name="button">all num add {{interval}}</button>
      <button id="addBtn" type="button" name="button">add 1</button>
      <button id="sunBtn" type="button" name="button">sub 1</button>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el:"#view",
        data:{
          num1:0,
          interval:1,

        },
        methods:{
          allChange(){
            this.num1 = this.num1 + this.interval;
          },
          allChange2(){
            return this.num1;
          },
          add(){
            ++this.interval;
          },
          sub(){
            --this.interval;
          }
        }

      });
      addBtn.onclick = function () { vm.add(); }
      sunBtn.onclick = function () { vm.sub(); }
      allBtn.onclick = function () { vm.allChange(); }


    </script>
  </body>
</html>
